<template>
	<view class="main">
		<h2>相关信息</h2>
		<view class="form">
			<view class="item">
				<view class="msg">
					<span>*</span>
					联系人
				</view>
				<view class="input">
					<input v-model="data.realname" type="text" value="" />
				</view>
			</view>
			<view class="item">
				<view class="msg">
					<span>*</span>
					手机号
				</view>
				<view class="input">
					<input v-model="data.mobile" type="text" value="" />
				</view>
			</view>
			<view class="item">
				<view class="msg">
					<span>*</span>
					所在地区
				</view>
				<view class="seleinput">
					<view class="sele" @tap="show1 = true">
						<span>{{ seleAdd }}</span>
						<image src="@/static/img/down.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="msg">
					<span>*</span>
					详细地址
				</view>
				<view class="input">
					<u--textarea v-model="data.address" placeholder="" height="80" maxlength="500" border="none"></u--textarea>
				</view>
			</view>
			<view class="moren">
				<view class="msg">
					设为默认地址
				</view>
				<view class="input">
					<image @tap="data.status = 0" v-if="data.status == 1" src="@/static/img/Group.png" mode=""></image>
					<image @tap="data.status = 1" v-else src="@/static/img/noGroup.png" mode=""></image>
				</view>
			</view>
		</view>
		<u-picker :closeOnClickOverlay="true" @close="show1 = false" :show="show1" :columns="columns1" @cancel="show1 = false" keyName="name" @confirm="confirm1"></u-picker>
		<u-picker :closeOnClickOverlay="true" @close="show1 = false" :show="show2" :columns="columns2" @cancel="show2 = false" keyName="name" @confirm="confirm2"></u-picker>
		<u-picker :closeOnClickOverlay="true" @close="show1 = false" :show="show3" :columns="columns3" @cancel="show3 = false" keyName="name" @confirm="confirm3"></u-picker>
		<view class="bottom">
			<view class="btn" @tap="edit">保存</view>
		</view>
	</view>
</template>

<script>
import { District,address,read } from '@/api/user.js';
export default {
	data() {
		return {
			value1: '',
			addressList: [],
			columns1: [],
			columns2: [],
			columns3: [],
			show1: false,
			show2: false,
			show3: false,
			data: {
				mobile: '',
				area: '',
				address: '',
				realname: '',
				status: 0,
				id: ''
			},
			seleAdd: '请选择省市区'
		};
	},
	onLoad(e) {
		if(e.id){
			this.data.id = e.id
			this.detail()
		}
		this.getList();
	},
	methods: {
		async edit(){
			let res = await address(this.data)
			if(res.code == 1){
				uni.showToast({
					title:'保存成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pages/pageB/address/addressList'
					})
				},1000)
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		},
		async detail(){
			let res = await read({
				id:this.data.id
			})
			this.data.realname = res.data.realname
			this.data.mobile = res.data.mobile
			this.data.address = res.data.address
			this.data.area = res.data.area
			this.data.status = res.data.status
			this.seleAdd = `${res.data.province} ${res.data.city} ${res.data.district}`
		},
		async getList() {
			let res = await District();
			this.addressList = res.data;
			const arr = this.addressList.map((item) => {
				return { name: item.name, cid: item.cid, son: item.son };
			});
			arr.pop()
			this.columns1 = [arr];
		},
		confirm1(e) {
			if (e.value[0].son.length == 0) {
				this.data.area = e.value[0].cid;
				this.show1 = false;
			} else {
				const arr = e.value[0].son.map((item) => {
					return { name: item.name, cid: item.cid, son: item.son };
				});
				this.columns2 = [arr];
				this.show2 = true;
				this.show1 = false;
			}
			this.seleAdd = e.value[0].name;
		},
		confirm2(e) {
			if (e.value[0].son.length == 0) {
				this.data.area = e.value[0].cid;
				this.show2 = false;
			} else {
				const arr = e.value[0].son.map((item) => {
					return { name: item.name, cid: item.cid, son: item.son };
				});
				this.columns3 = [arr];
				this.show3 = true;
				this.show2 = false;
			}
			this.seleAdd = this.seleAdd + ' ' + e.value[0].name;
		},
		confirm3(e) {
			this.data.area = e.value[0].cid;
			this.show3 = false;
			this.seleAdd = this.seleAdd + ' ' + e.value[0].name;
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 44px);
	padding: 15px;
	h2 {
		font-size: 16px;
		color: #232323;
		font-weight: 700;
		margin-bottom: 20px;
	}
	.form {
		.moren{
			display: flex;
			align-items: center;
			.msg {
				font-size: 14px;
				color: #3d3d3d;
				margin-right: 10px;
			}
			.input{
				image{
					width: 20px;
					height: 20px;
				}
			}
		}
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			.msg {
				width: 20%;
				font-size: 14px;
				color: #3d3d3d;
				span {
					color: #fa3b3a;
				}
			}
			.input {
				width: 80%;
				input {
					padding: 0 5px;
					height: 40px;
					background-color: #f9f9f9;
					border-radius: 10px;
				}
				/deep/.u-textarea {
					background-color: #f9f9f9;
					border-radius: 10px;
				}
			}
			.seleinput {
				width: 80%;
				.sele {
					padding: 0 5px;
					min-height: 40px;
					border-radius: 10px;
					width: 100%;
					background-color: #f9f9f9;
					color: #3d3d3d;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image {
						width: 12px;
						height: 12px;
						margin-left: 5px;
					}
				}
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 15px;
		left: 0;
		width: 100%;
		padding: 0 15px;
		.btn {
			width: 100%;
			padding: 12px 0;
			text-align: center;
			color: #fff;
			background-color: #0a84ff;
			border-radius: 100px;
		}
	}
}
</style>
